<template>
  <j-modal
    :title="'提取特征值 【 '+model.datasetName+' 】'"
    :width="width"
    :visible="visible" 
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="采样间隔" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="timeInterval">
                <a-input-number v-model="model.timeInterval" />
                <a-select defaultValue="天" style="width: 100px" v-model="model.intervalUnit">
                  <a-select-option value="天">天</a-select-option>
                  <a-select-option value="时">时</a-select-option>
                  <a-select-option value="分">分</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="聚合方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selectMethod">
                <a-select placeholder="请选择" default-value="" style="width: 100px" v-model="model.selectMethod">
                  <a-select-option value="平均值">平均值</a-select-option>
                  <a-select-option value="方差">方差</a-select-option>
                  <a-select-option value="均方根">均方根</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'ExtractModal',
  components: {},
  data() {
    return {
      title: '提取特征值',
      width: 500,
      visible: false,
      disableSubmit: false,
      model: {
        datasetName: '',
        datasetCode:'',
        timeInterval: '1',
        intervalUnit: '天',
        selectMethod: '平均值',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        timeInterval: [{ required: true, message: '请输入采样间隔!' }],
        selectMethod: [{ required: true, message: '请选择聚合方式!' }],
      },
    }
  },
  methods: {
    add() {
      this.visible = true
      this.confirmLoading = false
    },
    edit(record) {
      this.visible = true
      this.confirmLoading = false
      this.model.datasetName = record.name
      this.model.datasetCode = record.code
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      var that = this
      this.confirmLoading = true
      var url =
        '/feature/features?datasetName=' +
        that.model.datasetCode +
        '&timeInterval=' +
        that.model.timeInterval +
        '&intervalUnit=' +
        that.model.intervalUnit +
        '&selectMethod=' +
        that.model.selectMethod
      getAction(url)
        .then((res) => {
          if (res.success) { 
            that.$emit('ok',res.result.records)
            that.close()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>